<template>
  <div>
    <base-layout ref="layout" :isPage="true" :showTitle="false" @onFuncBtn="onFuncBtn" @pageChange="pageChange"
      v-loading="loading">
      <div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
        <base-table :border="true" :showIndex="false" :slotrow="true" :tableHeight="tableHeight" :tableData="tableData"
          :tableColumn="tableColumn" @radioChange="radioChange" :tabLoading.sync="tabLoading" ref='customtable'>
          <template v-slot:createDate="{ row }">
            <span>{{ formatTime(row.row.createDate) }}</span>
          </template>
          <template v-slot:updateDate="{ row }">
            <span>{{ formatTime(row.row.updateDate) }}</span>
          </template>
        </base-table>
      </div>
    </base-layout>
    <base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="choiceDialog"
      :footerShow="false" title="流程调整" width="90%" top="3vh" v-if="choiceDialog">
      <edit ref="edit" @close="close" :openState="openState"></edit>
    </base-dialog>
  </div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import BaseTable from "@/components/base/baseTable/index.vue";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import { GetBillList, deleteList } from "@/api/apis/flowPath"
import edit from "./edit"
export default {
  data() {
    return {
      mainHight: "calc(100vh - 85px)",
      // tableHeight: "calc(100vh - 210px)",
      tabLoading: false,
      // buttonList: [
      //   {
      //     type: "primary",
      //     menuName: "添加",
      //     icon: "el-icon-plus",
      //     function: "add",
      //   },
      //   {
      //     menuName: "编辑",
      //     function: "edit",
      //     icon: "el-icon-edit",
      //   },
      //   {
      //     type: "danger",
      //     menuName: "删除",
      //     function: "del",
      //     icon: "el-icon-delete",
      //   },
      // ],
      tableData: [],
      tableColumn: [
        {
          label: "流程编号",
          prop: "wfCode",
          tooltip: true,
        },
        {
          label: "流程名称",
          prop: "wfName",
          tooltip: true,
        },
        {
          label: "创建日期",
          prop: "createDate",
          tooltip: true,
        },
        {
          label: "修改日期",
          prop: "updateDate",
          tooltip: true,
        },
        {
          label: "状态",
          prop: "state",
          tooltip: true,
        },
      ],
      pageModel: {
        page: 1, //当前页码
        limit: 20, //每页显示多少
        Sequence: "", //排列方式
        SequenceName: "" //需要排列的字段名
      },
      loading: false,
      choiceDialog: false,
      selected: [],
      openState: "edit"
    };
  },

  components: {
    baseLayout,
    BaseTable,
    baseDialog,
    edit
  },
  created() {
    this.init()
  },
  methods: {
    // 时间截取
    formatTime(row) {
      return row && row.substring(0, 10);
    },
    async init() {
      this.loading = true
      const res = await GetBillList(this.pageModel)
      if (res.success == "true") {
        this.tableData = res.data[1]
        this.$refs.layout.setPageTotal(res.data[0]);
        this.loading = false
      }
    },
    // 按钮点击
    onFuncBtn(btnEven) {
      if (btnEven.menuName == "新增") {
        this.openState = "add"
        this.choiceDialog = true
      } else if (btnEven.menuName == "编辑") {
        if (this.selected.length == 0) {
          this.$vmNews("请选择一条记录");
          return
        }
        this.choiceDialog = true
        this.$nextTick(() => {
          this.$refs.edit.setDataList(this.selected)
        })
      } else if (btnEven.menuName == "删除") {
        if (this.selected.length == 0) {
          this.$vmNews("请选择一条记录");
          return
        } else {
          this.$confirm("确认删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.deleteList()
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消操作",
              });
            });
        }
      }
    },
    // 分页变化
    pageChange(model) {
      this.pageModel.page = model.page;
      this.pageModel.limit = model.limit;
      this.init()
    },
    // 数据单选事件
    radioChange(val) {
      this.selected = [];
      this.selected.push(val);
    },
    close() {
      this.choiceDialog = false
      this.init()
    },
    async deleteList() {
      const res = await deleteList({
        id: this.selected[0].id
      })
      if (res.success == "true") {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.$refs.customtable.clearRadioIndex();
        this.init()
        this.selected = []
      }
    }
  },
};
</script>
<style scoped lang="sass"></style>
